Getting Started

To use WPF Diagrams, add a reference to the Mindscape.WpfDiagramming.Foundation assembly. The diagramming controls are in the http://namespaces.mindscape.co.nz/wpf namespace which is usually aliased to the ms: prefix.

The main class for working with diagrams is the DiagramSurface class. DiagramSurface is a WPF control for presenting diagrams. You can create a DiagramSurface in XAML in the usual way, but you’ll usually also want to take advantage of the built-in styles and templates, so you should also merge in the DiagramShapes resource dictionary.

CopyCreating a DiagramSurface
<Window.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ms:DiagramShapes />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Window.Resources>

<ms:DiagramSurface Name="ds" />

By default the DiagramSurface displays an empty diagram, so the first thing to do is to add some shapes to it. You can do this in code using the ShapeNode class:

CopyCreating a diagram in code
ds.Diagram.Nodes.Add(new ShapeNode { Shape = DiagramShapes.Rectangle, Bounds = new Rect(20, 20, 150, 80) });

Or you can add a DiagramToolBox to your window so that users can create shapes of their own:

CopyProviding a shape toolbox
<ms:DiagramToolBox>
  <ms:DiagramToolBoxGroup Header="Basic Shapes">
    <ms:DiagramNodeTool ms:ShapeTool.Shape="Rectangle" />
    <ms:DiagramNodeTool ms:ShapeTool.Shape="Ellipse" />
  </ms:DiagramToolBoxGroup>
</ms:DiagramToolBox>

When you select a shape, you will see that it has a number of connection points. You can drag the mouse between connection points to create a connection.

Finally, you can save and reload the diagrams you create using the DiagramXmlSerializer, and print them using the DiagramPrinter class.

In this quick introduction, we’ve seen the basics of creating a diagramming control and building simple diagrams on it. For more detail and to understand how to customise the appearance and layout of shapes and connections, see the QuickStart walkthrough.